<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
$(function(){
    getTaskData(1);
})

function getTaskData(num){
    var url = "/phone/queryTask/" + num;
    AjaxUtil.ajaxRequest(url, "json", function (allData) {
        setTaskList(allData);//构建
    },false);
}

/*刷新CaptionHover插件*/
function initCaptionHover(){
  $('.demo').captionHover({
    fx: 'zoe'
  });
}

/*构建前台界面+数据*/
function setTaskList(allData){
    $(".content-inner").empty();
    setTaskListButton(allData);
    setTaskListData(allData);
    initCaptionHover();
}

/*构建前台界面*/
function setTaskListButton(allData){
    var prePage = allData.prePage;
    var nextPage = allData.nextPage;
    var hasPreviousPage = allData.hasPreviousPage;
    var hasNextPage = allData.hasNextPage;
    if (hasPreviousPage) {
      $(".content-inner").append("<div class='prev_button' onclick='moveToTaskList("+prePage+");'></div>");
    }
    
    if (hasNextPage) {
      $(".content-inner").append("<div class='next_button' onclick='moveToTaskList("+nextPage+");'></div>"); 
    }
}

/*构建前台数据*/
function setTaskListData(allData){
    var dataList = allData.list;
    var taskListHtml = "";
    for(var i=0;i<7;i++){
        var data = dataList[i];
        if(data != undefined){
            var id = data.id;//任务id
            var license = data.license;//批准文号
            var account = data.account;//手机号
            var start_Time = data.start_Time;//开始时间
            var end_Time = data.end_Time;//结束
            taskListHtml += getTaskListHtml(i,id,license,account,start_Time,end_Time);
        } else {
            taskListHtml += getNoTaskListHtml();
        }
    }
    $(".content-inner").append(taskListHtml);
    if(dataList.length>0){
        result(0,dataList[0].id); 
    }
}

/*任务列表为空*/
function getNoTaskListHtml(){
  var taskListHtml = "<div class='content-inner-task' style='background-image:url(\"../img/index/about-bg.jpg\");'></div>";
  return taskListHtml;
}

/*构建tasklisthtml*/
function getTaskListHtml(index,id,license,account,start_Time,end_Time){
    var taskListHtml = 
    "<div class='content-inner-task' style='background-image:url(\"../img/index/about-bg.jpg\");'>"+
    "<figure class='demo'>"+
    "<div class='task-body' onclick='result("+index+","+id+");' style='width:100%;height:160px;'>"+
    "  <div class='task-body-title'>"+
    "   <span class='task-body-title-span'><@spring.message 'phone.mode.id'/>:</span>"+
    "  </div>"+
    "  <div class='task-body-info'>"+
    "   <span class='task-body-info-span'>"+noNull(id)+"</span>"+
    "  </div>"+
    "  <div class='task-body-title'>"+
    "   <span class='task-body-title-span'><@spring.message 'phone.mode.approved'/>:</span>"+
    "  </div>"+
    "  <div class='task-body-info'>"+
    "   <span class='task-body-info-span'>"+noNull(license)+"</span>"+
    "  </div>"+
    "  <div class='task-body-title'>"+
    "   <span class='task-body-title-span'><@spring.message 'phone.mode.phone'/>:</span>"+
    "  </div>"+
    "  <div class='task-body-info'>"+
    "   <span class='task-body-info-span'>"+noNull(account)+"</span>"+
    "  </div>"+
    "  <div class='task-body-title'>"+
    "   <span class='task-body-title-span'> <@spring.message 'phone.mode.begin.time'/>:</span>"+
    "  </div>"+
    "  <div class='task-body-info'>"+
    "   <span class='task-body-info-span'>"+noNull(start_Time)+"</span>"+
    "  </div>"+
    "  <div class='task-body-title'>"+
    "   <span class='task-body-title-span'><@spring.message 'phone.mode.end.time'/>:</span>"+
    "  </div>"+
    "  <div class='task-body-info'>"+
    "   <span class='task-body-info-span'>"+noNull(end_Time)+"</span>"+
    "  </div>"+
    "</div>"+
    "   <figcaption style='height:50px;'>"+
    "   <p class='icon-links' >"+
    "   <div class='layui-btn-group'> "+
    "      <button type='button' class='layui-btn layui-btn-normal layui-btn-sm' onclick='result("+index+","+id+");'><span class='result-font'><@spring.message 'phone.mode.result'/><span></button>"+
    "      <button type='button' class='layui-btn layui-btn-sm' onclick='track("+index+",\""+id+"\",\""+start_Time+"\",\""+end_Time+"\");'><span class='result-font'><@spring.message 'phone.mode.track'/><span></button>"+
    "      <button type='button' class='layui-btn layui-btn-warm layui-btn-sm' onclick='analysis("+index+",\""+id+"\",\""+account+"\",\""+start_Time+"\",\""+end_Time+"\");'><span class='result-font'><@spring.message 'phone.mode.analysis'/><span></button>"+
    "      <button type='button' class='layui-btn layui-btn-danger layui-btn-sm' onclick='showLocation("+index+","+id+");'><span class='result-font'><@spring.message 'phone.analysis.table.positioning' /><span></button>"+
    "   </div>"+
    "   </p>"+
    "   </figcaption>"+
    "</figure>"+
    "</div>";
    return taskListHtml;
}



/*翻页*/
function moveToTaskList(num){
    getTaskData(num);
}

/*展示结果*/
function result(index,set_Id){
    addBeChoose(index);
    webuiPopoversHide();
    removeResultHtml();
    setLayuiData(set_Id);
}

/*清除map*/
function removeResultHtml(){
    var html = "<div display=\"none\" id=\"result\"></div>";
    $("#googleMap").html(html);
}

/*layui展示结果*/
function setLayuiData(set_Id){
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#result'
      ,url:'/phone/queryResult/' + set_Id
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
      ,limit:20
      ,height: 862
      ,cols: [[
        {title: '<@spring.message 'phone.table.useraccount'/>', field:'account', width:120, sort: true},
        {title: '<@spring.message 'phone.table.carrier'/>', field:'telecom_Vendor_Name', width:100, sort: true},
        {title: '<@spring.message 'phone.table.privateIP'/>', field:'private_Ip', width:140, sort: true},
        {title: '<@spring.message 'phone.table.destionIP'/>', field:'dst_Ip', width:140, sort: true},
        {title: '<@spring.message 'phone.table.timetype'/>', field:'line_Time_Type', width:100, sort: true,templet:function(obj){
            return getTimeType(obj);
        }},
        {title: '<@spring.message 'phone.table.time'/>', field:'access_Time', width:160, sort: true},
        {title: '<@spring.message 'phone.table.url'/>', field:'url', width:250, sort: true},
        {title: '<@spring.message 'phone.table.application'/>', field:'application', width:100, sort: true},
        {title: 'IMEI', field:'imei', width:100, sort: true},
        {title: 'IMSI', field:'imsi', width:100, sort: true},
        {title: 'LAC', field:'lac', width:100, sort: true},
        {title: 'CI', field:'sac', width:100, sort: true},
        {title: '<@spring.message 'phone.table.detailaddr'/>', field:'address', width:182, sort: true}
      ]]
      ,page: true
    });
  });
}

/*展示轨迹*/
function track(index,id,startTime,endTime){
  addBeChoose(index);
  webuiPopoversHide();
  removeResultHtml();
  showTrack(id,startTime,endTime);
}

/*展示分析*/
function analysis(index,set_Id,account,startTime,endTime){
  addBeChoose(index);
  webuiPopoversHide();
  removeResultHtml();
  showAnalysisMap(set_Id,account,startTime,endTime);
}

/*展示定位*/
function showLocation(index,set_Id){
    addBeChoose(index);
    webuiPopoversHide();
    removeResultHtml();
    showLocationMap(set_Id);
}

/*任务栏被选中*/
function addBeChoose(index){
    $(".content-inner-task").removeClass("taskBeChoose");
    $(".content-inner-task:eq("+index+")").addClass("taskBeChoose");
}

/*隐藏webuiPopover*/
function webuiPopoversHide(){
    $("#internet").webuiPopover('destroy');
    $("#timequery").webuiPopover('destroy');
    $("#timescreen").webuiPopover('destroy');
    $("#statistic").webuiPopover('destroy');
    $("#chinese").webuiPopover('destroy');
    $("#identity").webuiPopover('destroy');
    $("#gps").webuiPopover('destroy');
    $("#position").webuiPopover('destroy');
}


/*时间类型*/
function getTimeType(obj) {
    var timeType = parseInt(obj.line_Time_Type);
    if(timeType == 1){
        return "<@spring.message 'phone.table.timetype.goonline'/>";
    }else if(timeType == 2){
        return "<@spring.message 'phone.table.timetype.gooffline'/>";
    }else if(timeType == 0 || timeType == 3 || timeType == 9){
        if(obj.account_Type == 1){
            //固网
            return "\<@spring.message 'phone.table.timetype.online'/>";
        }else{
            //2-移动网
            return "<@spring.message 'phone.table.timetype.access'/>";
        }
    }else{
        return "<@spring.message 'phone.table.timetype.unknown'/>";
    }
}
</script>

</body>
</html>
